
@import "./theme.scss";


ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
p{
  margin: 0;
}
h2{
  margin:0;
}
a{
  color: $color-a;
  text-decoration:none;
  transition: all .4s ease-in-out;
  &:hover{
    color: $color-a + #333;
    text-decoration: underline;
  }
}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
body,html{
  margin: 0;
  background-color: $bg-color;
  padding: 0;
  overflow: hidden;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#body{
  margin: 0;
  background-color: $bg-color;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  &>header{
    $header-div-width: 300px;
    background-color: $bg-color - #333;
    &>div{
      position: fixed;
      width: $header-div-width;
      height: $header-div-width / 2;
      background-color: $color-main;
      border: 4px solid #fff;
      text-align: center;
      box-shadow: 0 0 4px #04A4CC;
      transition: all .4s ease-in-out;
      border-radius: 100px;
      opacity: .5;
      z-index: $zIndex-header-div;
      p{
        color: #83FFE9;
        display: block;
        height: $header-div-width / 4 - 50px;
        margin-top: 20px;
        font-size: 12px;
        height: 32px;
        span{
          transition: opacity 2s ease-in-out;
          opacity: 0;
          text-shadow: 0 0 30px #FFF;
          display: block;
          &.delay{
            transition-delay: 1s;
          }
        }
      }
      &:hover, &.hover{
        opacity: .9;
        transform: rotate(0);
        border-radius: 30px;
        p{
          span{
            opacity: 1;
          }
        }
      }
    }
    .menu{
      padding-top: $header-div-width / 2;
      top: - $header-div-width / 2 - 10px;
      left: - $header-div-width / 2 - 10px;
      transform: rotate(-45deg);
      &:hover, &.hover{
        left: 0;
      }
      ul{
        //padding-top: $header-div-width / 4 - 30px;
        a{
          color: #FFF;
        }
        $header-menu-ul-padding: 50px;
        $header-menu-li-width: 60px;
        font-size: 16px;
        padding: 0 $header-menu-ul-padding;
        li{
          transition: all .4s ease-in-out;
          float: left;
          padding: 4px 0;
          cursor: pointer;
          width: $header-menu-li-width;
          &.index{
            margin: 20px ($header-div-width - $header-menu-ul-padding * 2 - $header-menu-li-width)/2;
          }
          &.three{
            margin: 0 ($header-div-width - $header-menu-li-width * 3 - $header-menu-ul-padding * 2)/2;
          }
          &:hover{
            transform: rotate(10deg);
            background-color: #F8F8F8;
            color: #04A4CC;
            border-radius: 10px;
            box-shadow: 0 0 10px #fff;
          }
        }
      }
    }
    .auther{
      padding-top: $header-div-width / 2;
      top: - $header-div-width / 2 - 10px;
      right: - $header-div-width / 2 - 10px;
      transform: rotate(45deg);
      &:hover, &.hover{
        right: 0;
        img{
          transform: rotate(0);
          margin-top: 20px;
          width: 24%;
        }
      }
      img{
        transition: all .4s ease-in-out;
        transform: rotate(-45deg);
        width: 30%;
        border-radius: 50%;
        box-shadow: 0 0 10px #FFF;
      }
    }
    .chat{
      padding-bottom: $header-div-width / 2;
      right: - $header-div-width / 1.5 - 10px;
      bottom: - $header-div-width / 1.5 - 10px;
      transform: rotate(45deg);
      &:hover, &.hover{
        right: 0;
        p{
        }
      }
    }
    .other{
      padding-bottom: $header-div-width / 2;
      bottom: - $header-div-width / 1.5 - 10px;
      left: - $header-div-width / 1.5 - 10px;
      transform: rotate(-45deg);
      &:hover, &.hover{
        left: 0;
      }
    }
  }
  &>.main{
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
  }
  &>footer{
    color: #fff;
    transition: all .4s ease-in-out;
    position: fixed;
    z-index: $zIndex-footer;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    box-shadow: 0 0 4px $color-main;
    background-color: $color-main + #222;
    opacity: .9;
    height: 0px;
    padding-top: 4px;
    &:hover{
      padding-top: 20px;
      height: 84px;
    }
  }
}

h1{
  color: $color-main;
}
